
<template>
  <!--  申请单详情 -->
  <div class="ApplicationDetail">
    <div class="side_1"></div>
    <span class="add_1">详情</span>
    <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh">返回</el-button>
    <div class="body">
      <el-steps :active="item.currentStep" align-center class="step">
        <el-step title="发布" :description="item.createOnStr"></el-step>
        <el-step
          :title="ite.RoleName+':'+ite.state"
          :description="ite.CreateOn"
          v-for="ite in stepList"
          :key="ite.StepId"
        ></el-step>
      </el-steps>
      <div style="margin:50px 0 ;">
        <!-- 物资申请 -->
        <table v-show="type==1">
          <tr>
            <td style="width:10%;text-align:center;">用品分类</td>
            <td>{{item.wzOne}}</td>
          </tr>
          <tr>
            <td style="width:10%;text-align:center">用品类别</td>
            <td>{{item.wTwo}}</td>
          </tr>

          <tr>
            <td style="width:10%;text-align:center">用品名称</td>
            <td>{{item.wzName}}</td>
          </tr>
          <tr style="height:60px;">
            <td style="width:10%;text-align:center">领用数量</td>
            <td>{{item.num}}{{item.unit}}</td>
          </tr>
          <tr>
            <td style="width:10%;text-align:center">申请原因</td>
            <td>{{item.reason}}</td>
          </tr>
        </table>
        <!-- 用车申请 -->
        <table v-show="type==2">
          <tr>
            <td style="width:10%">车牌号</td>
            <td style="width:40%">{{item.carNumber}}</td>

            <td style="width:10%">驾驶人</td>
            <td style="width:40%">{{item.driver}}</td>
          </tr>
          <tr>
            <td style="width:10%">用车时间</td>
            <td style="width:40%">{{item.time}}</td>

            <td style="width:10%">去往地点</td>
            <td style="width:40%">{{item.address}}</td>
          </tr>
          <!-- <tr>
          <td style="width:10%">去往地点</td>
          <td style="width:40%">{{arrivesite}}</td>

          <td style="width:10%">占用时间</td>
          <td style="width:40%">{{time}}小时</td>
        </tr>
        <tr>
          <td style="width:10%">行驶里程</td>
          <td style="width:40%">{{kilometro}}公里</td>
          <td style="width:10%">加油状况</td>
          <td style="width:40%">{{cheer}}</td>
          </tr>-->
          <tr>
            <td>申请原因</td>
            <td colspan="3">{{item.reason}}</td>
          </tr>
        </table>

        <!-- 维修申请 -->
        <table v-show="type==3">
          <tr>
            <td style="width:10%">设备编号</td>
            <td style="width:40%">{{item.equipmentNum}}</td>
            <td style="width:10%">设备名称</td>
            <td style="width:40%">{{item.equipmentName}}</td>
          </tr>
          <tr>
            <td>设备地址</td>
            <td colspan="3">{{item.address}}</td>
          </tr>
          <tr>
            <td style="width:10%">故障时间</td>
            <td style="width:40%">{{item.time}}</td>
            <td style="width:10%">维修时间</td>
            <td style="width:40%">{{item.repairdate}}</td>
          </tr>
          <tr>
            <td>申请原因</td>
            <td colspan="3">{{item.reason}}</td>
          </tr>
        </table>
        <!-- 接待 -->
        <table v-show="type==4">
          <tr>
            <td style="width:10%">接待时间</td>
            <td style="width:25%">{{item.time}}</td>
            <td style="width:10%">参与部门</td>
            <td style="width:25%">{{item.departName}}</td>
            <td style="width:10%">参与人数</td>
            <td style="width:20%">{{item.num}}人</td>
          </tr>
          <tr>
            <td>接待级别</td>
            <td>{{item.level}}</td>

            <td>接待地点</td>
            <td colspan="3">{{item.address}}</td>
          </tr>
          <tr>
            <td style="width:10%">接待用品</td>
            <td colspan="5">
              <!-- <table style="max-height:80px;overflow:auto;width:100%;border:none">
                <tr style="height:50px;"><td>分类</td><td>类别</td><td>名称</td><td>数量</td></tr>
                <tr style="height:50px;" v-for="ite in jdList" :key="ite"><td>{{ite.fenlei}}</td><td>{{ite.liebie}}</td><td>{{ite.name}}</td><td>{{ite.num}}</td></tr>
              </table>-->
              <el-table :data="jdList" style="text-align: center; margin:10px 0;"  border :max-height="150">
                <el-table-column label="分类" prop="fenlei"></el-table-column>
                <el-table-column label="类别" prop="liebie"></el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="数量" prop="num"></el-table-column>
              </el-table>
            </td>
          </tr>
          <tr>
            <td style="width:10%">接待原因</td>
            <td colspan="5">{{item.reason}}</td>
          </tr>
        </table>
        <!-- <el-table :data="rejectList" style="text-align: center;" :max-height="150" >
          <el-table-column label="驳回时间" prop="Time"></el-table-column>
          <el-table-column label="驳回原因" prop="Main"></el-table-column>
          <el-table-column label="审批人" prop="Name"></el-table-column>
        </el-table> -->
        <table class="table" v-if="rejectList.length>0" style="margin-top:-1px;">
          <tr v-for="item in rejectList" :key="item.id">
            <td style="width:10%;font-weight:700;">驳回时间</td>
            <td style="width:20%;">{{item.Time}}</td>
            <td style="width:10%;font-weight:700;">驳回原因</td>
            <td>{{item.Main}}</td>
            <td style="width:10%;font-weight:700;">审批人</td>
            <td style="width:15%;">{{item.Name}}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="btn_bottom" v-show="shows==0">
      <el-button type="primary" size="medium" @click="caozuo(1)">确定</el-button>
      <el-button type="primary" size="medium" @click="buohui">驳回</el-button>
    </div>
    <!-- 驳回弹框 -->
    <el-dialog title="驳回" :append-to-body="true" :visible.sync="dialogVisibles" width="30%">
      <div class="color_box"></div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容"
        v-model="main"
      ></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="caozuo(2)">确定</el-button>
        <el-button size="small" type="info" @click="dialogVisibles = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      dialogVisibles: false,
      id: 0,
      type: 0,
      shows: 1,
      item: {},
      stepList: [],
      jdList: [],
      rejectList: [],//驳回记录
      main: "",
      creater: 0,
      Mark: 0,
    }
  },
  created () {
    this.id = this.$route.query.e;
    this.type = this.$route.query.type;
    this.shows = this.$route.query.shows;
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getData();
  },
  methods: {
    Fh () {
      window.history.go(-1);
    },
    buohui () { this.dialogVisibles = true; },
    caozuo (e) {
      if (this.Mark == 0) {
        if (e == 2) { if (this.main == "") { this.$message.error("驳回事由非空"); return } }
        var obj = { itemId: this.id, main: this.main, state: e, creater: this.creater };
        var objs = JSON.stringify(obj); let the = { index: 4, jsondata: objs };
        this.Mark = 1;
        axios.post("/apis/MyCenter.asmx/Examine", the).then(({ data }) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            setTimeout(() => {
              window.history.go(-1);
            }, 500);          }
          else { this.$message.error(list.tip); }
        })
      }
    },
    // 获取数据
    getData () {
      var obj = { id: this.id };
      var objs = JSON.stringify(obj);
      let the = { index: 19, jsondata: objs };
      console.log(objs);
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        if (list == null) { this.$message.error("数据异常"); } else { this.item = list.basemess; this.stepList = list.stepList, this.rejectList = list.rejectList, this.jdList = list.jdList }
        console.log(list);
      });
    },
  }
}


</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.body {
  width: 98%;
  background-color: $white;
  margin-left: 10px;
  margin-top: 40px;
  overflow: hidden;
}
.side_1 {
  width: 5px;
  height: 16px;
  background-color: $Header_color;
  margin-left: 10px;
  margin-top: 30px;
}
.add_1 {
  margin-left: 20px;
  margin-top: -20px;
  float: left;
  font-size: 18px;
  font-weight: 400;
}
.btn_fanhui {
  margin-top: -20px;
  margin-right: 20px;
  float: right;
}
.step {
  margin-top: 50px;
}
table,
table tr {
  height: 60px;
}
table tr td {
  border: 1px solid #e7e7e7;
  text-align: center;
  padding: 0 20px;
}

table {
  // width: 70%;
  margin: 0px auto;
}
.btn_bottom {
  margin-top: 50px;
  text-align: center;
}
</style>